<template>
  <div>
    <detail-banner :sightName="sightName" :bannerImg="bannerImg" :gallaryImgs="gallaryImgs"></detail-banner>
    <detail-header></detail-header>
    <detail-list :list="categoryList"></detail-list>
    <div class="Detail"></div>
  </div>
</template>

<script>
  import DetailBanner from './components/Banner'
  import DetailHeader from './components/header'
  import DetailList from './components/list'
  import axios from 'axios'
    export default {
        name: "Detail",
        components:{
          DetailBanner,
          DetailHeader,
          DetailList
        },
      data (){
          return {
            sightName:'',
            bannerImg:'',
            gallaryImgs:[],
            categoryList:[],
          }
      },
      methods :{
        getDetailInfo (){
          axios.get('../../../static/mock/detail.json',{
            params:{
              id:this.$route.params.id
            }
          }).then(this.getDetailSucc)
        },
        getDetailSucc (res){
          res = res.data
          if(res.ret && res.data){
            const data = res.data
            this.sightName = data.sightName
            this.bannerImg = data.bannerImg
            this.gallaryImgs = data.gallaryImgs
            this.categoryList = data.categoryList
            console.log(this.sightName)
          }
        }
      },
      mounted (){
          this.getDetailInfo()
      }
    }
</script>

<style scoped>
  .Detail{ height: 20rem}
</style>
